<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #t {
            width: 600px;
            height: 200px;
            text-align: center;
            margin: 0 auto;

        }

        #txt {
            width: 100%;
            height: 100%;
            display: none;
   
            
        }

        td {
            width: 200px;
            height: 30px;
            border: 1px solid plum;

        }
    </style>

</head>

<body>
    <table id="t">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>爱好</td>

        </tr>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>爱好</td>
        </tr>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>爱好</td>
        </tr>
    </table>
    <input type="text" id="txt">
  
</body>
 <script>
    var txt=document.getElementById("txt");
    var table=document.getElementById("t");
    for(var i=1;i<table.rows.length;i++){
        for(var j=0;j<table.rows[i].cells.length;j++){
            table.rows[i].cells[j].onclick=function(){
                txt.value=this.innerHTML;
                txt.style.display="block";
                this.replaceChild(txt,this.firstChild);
                txt.focus()
            }
        }
    }
    txt.onclick=function(event){
        var e=event||window.event;
        // 阻止冒泡
        e.stopPagation();
    }
    txt.onblur=function(){
        this.parentNode.innerHTML=txt.value;
        txt.style.display="none"
    }
 </script>
</html>